<template>
  <div class="ChangeAndUpg">
    <div class="topSearch">
      <div class="time">
        <span>时间</span>
        <!-- <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyyMMdd"
                    @change="change(value1)"
                >
                </el-date-picker> -->
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYYMMDDHHmmss"
          @change="change(value1)"
        >
        </el-date-picker>
      </div>
      <div class="system">
        <span>所属系统</span>
        <el-autocomplete
          clearable
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入系统名称"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </div>

      <div class="btn">
        <el-button @click="search()">搜索</el-button>
        <el-button @click="resetForm(formRef)"> 重置</el-button>
        <el-button @click="back()">返回</el-button>
      </div>
    </div>
    <div class="title">
      <span>标题</span>
      <el-form :model="dynamicValidateForm" ref="formRef" label-width="100px" class="demo-dynamic">
        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <el-input v-model="domain.value" />
        </el-form-item>
        <el-form-item>
          <el-button @click="addDomain">+</el-button>
          <!-- <el-button @click="resetForm('dynamicValidateForm')"
                        >重置</el-button
                    > -->
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="cmBiz">
        <p>
          <span class="tip"> 资源变更单</span>
          <button class="btn" @click="goResources">
            查看详情<i class="el-icon-arrow-right el-icon--right"></i>
          </button>
        </p>
        <div class="main">
          <div class="tableBox" ref="container">
            <el-table
              :height="tableHeight"
              class="table"
              ref="multipleTableRefCm"
              :data="cmBizList"
              tooltip-effect="dark"
              @select="selectChangeCm"
              @selection-change="handleSelectionChangeCm"
              row-key="getRowKeyCm"
              @row-click="handleRowClickCm"
            >
              <!-- :height="tableHeight" -->

              <el-table-column align="center" :reserve-selection="false" type="selection">
              </el-table-column>
              <el-table-column
                align="center"
                prop="changeCode"
                label="变更单号"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="changeSingleName"
                label="变更标题"
                min-width="240%"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="implementorName"
                label="实施人"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="expectStartTime"
                label="计划开始时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="expectEndTime"
                label="计划结束时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="changeCategoryName"
                label="类型"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="checkOrgName"
                label="变更机构"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="sysname"
                label="所属系统"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
          <el-pagination
            ref="pagination"
            @size-change="handleSizeChangeCm"
            @current-change="handleCurrentChangeCm"
            :current-page="pageNumCm"
            :page-sizes="[5, 10]"
            :page-size="pageSizeCm"
            layout="total, sizes, prev, pager, next, jumper"
            :total="cmBizTotal"
          ></el-pagination>
        </div>
      </div>

      <div class="vmBiz">
        <p>
          <span class="tip">版本发布</span>
          <button class="btn" @click="goEdit">
            查看详情<i class="el-icon-arrow-right el-icon--right"></i>
          </button>
        </p>
        <div class="main">
          <div class="tableBox" ref="container">
            <el-table
              :height="tableHeight"
              ref="multipleTableRefVm"
              :data="vmBizList"
              tooltip-effect="dark"
              @select="selectChange"
              @selection-change="handleSelectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                align="center"
                :reserve-selection="false"
                type="selection"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="versionInfoNo"
                label="版本编号"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="startUpgradeTime"
                label="开始时间"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="endUpgradeTime"
                label="结束时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="versionInfoName"
                label="版本简称"
                min-width="380%"
              ></el-table-column>
              <!-- prop="versionInfoName" -->
              <el-table-column
                align="center"
                prop="systemName"
                label="所属单位"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="ogSys.caption"
                label="所属系统"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            ref="pagination"
            @size-change="handleSizeChangeVm"
            @current-change="handleCurrentChangeVm"
            :current-page="pageNumVm"
            :page-sizes="[5, 10]"
            :page-size="pageSizeVm"
            layout="total, sizes, prev, pager, next, jumper"
            :total="vmBizTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import type { FormInstance } from 'element-plus';
  import { onMounted, ref, reactive } from 'vue';
  import { getCmbizorVersionView, changeOrganization } from '@/http/api';
  // import moment from 'moment';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const value1 = ref('');
  const startTime = ref('');
  const endTime = ref('');
  const state2 = ref(''); // 选中的系统名称
  const orgId = ref(''); // 选中的系统ID
  const restaurants = reactive([]);
  const dynamicValidateForm = reactive<{
    domains: DomainItem[];
  }>({
    domains: [
      {
        key: 1,
        value: ''
      }
    ]
  });
  interface DomainItem {
    key: number;
    value: string;
  }
  const formRef = ref<FormInstance>();
  const changeSingleName = ref(''); // 变更标题
  const arr = ref(1);
  const pageSizeCm = ref(5);
  const pageNumCm = ref(1);
  const cmBizList = reactive([]); // 资源变更单列表
  const cmBizTotal = ref(0);
  const vmBizList = reactive([]); // 版本发布列表
  const vmBizTotal = ref(0);
  const tableHeight = ref(0);
  const pageSizeVm = ref(5);
  const pageNumVm = ref(1);
  const multipleTable = ref('');
  const multipleTableRefVm = ref<InstanceType<typeof ElTable>>();
  const multipleTableCm = ref('');
  const multipleTableRefCm = ref<InstanceType<typeof ElTable>>();
  const container = ref<null | HTMLElement>(null);
  onMounted(() => {
    getCmbizorVersionViewlist();
    changeOrganizationlist();
    calHeight();
  });
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
  const getCmbizorVersionViewlist = () => {
    getCmbizorVersionView({
      startTime: startTime.value,
      endTime: endTime.value,
      sysId: orgId.value,
      changeSingleName: changeSingleName.value,
      pageSize: JSON.stringify(pageSizeCm.value),
      pageNum: JSON.stringify(pageNumCm.value),
      pageSizev: JSON.stringify(pageSizeVm.value),
      pageNumv: JSON.stringify(pageNumVm.value)
    }).then((res) => {
      if ((res as any).data.code == 500) {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'success'
        });
        return;
      }
      cmBizList.length = 0;
      vmBizList.length = 0;
      (cmBizList as any).push(...res.data.data.cmbiz.rows);
      (vmBizList as any).push(...res.data.data.vmbiz.rows);
      cmBizTotal.value = res.data.data.cmbiz.total;
      vmBizTotal.value = res.data.data.vmbiz.total;
    });
  };
  const changeOrganizationlist = () => {
    changeOrganization().then((res) => {
      if (res.data.code == 500) {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error'
        });
        return;
      }
      restaurants.length = 0;
      res.data.data.forEach((item) => {
        (restaurants as any).push({
          value: item.orgName,
          orgId: item.orgId
        });
      });
    });
  };
  const change = (value) => {
    startTime.value = value1.value ? value[0] : '';
    endTime.value = value1.value ? value[1] : '';
  };
  const querySearch = (queryString: string, cb: any) => {
    const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
    // call callback function to return suggestions
    cb(results);
  };
  const createFilter = (queryString: string) => {
    return (restaurants: RestaurantItem) => {
      if (restaurants.value) {
        return restaurants.value.includes(queryString);
      }
    };
  };
  const handleSelect = (item) => {
    orgId.value = item.orgId;
  };
  const addDomain = () => {
    arr.value = arr.value + 1;
    if (arr.value <= 4) {
      dynamicValidateForm.domains.push({
        key: Date.now(),
        value: ''
      });
    } else {
      ElMessage({
        showClose: true,
        message: '不能再增加了',
        type: 'warning'
      });
    }
  };
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    startTime.value = '';
    endTime.value = '';
    value1.value = '';
    state2.value = '';
    orgId.value = '';
  };
  const search = () => {
    changeSingleName.value = dynamicValidateForm.domains
      .map(function (obj) {
        return obj.value.replace(/(^\s*)|(\s*$)/g, '');
      })
      .join(',');
    getCmbizorVersionViewlist();
  };
  const back = () => {
    router.push({
      name: 'restructure'
    });
  };
  const handleSizeChangeCm = (size) => {
    pageSizeCm.value = size;
    getCmbizorVersionViewlist();
  };
  const handleCurrentChangeCm = (val) => {
    pageNumCm.value = val;
    getCmbizorVersionViewlist();
  };
  const handleSizeChangeVm = (size) => {
    pageSizeVm.value = size;
    getCmbizorVersionViewlist();
  };
  const handleCurrentChangeVm = (val) => {
    pageNumVm.value = val;
    getCmbizorVersionViewlist();
  };

  // 勾选的数据
  const handleSelectionChange = (val) => {
    multipleTable.value = val;
  };
  // 点击行触发，选中或不选中复选框
  const handleRowClick = (row) => {
    multipleTable.value = row;
    multipleTableRefVm.value.toggleRowSelection(row);
    selectChange(multipleTable.value);
  };

  const selectChange = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTableRefVm.value!.toggleRowSelection(del_row);
    }
  };
  const handleSelectionChangeCm = (val) => {
    multipleTableCm.value = val;
  };
  // 点击行触发，选中或不选中复选框
  const handleRowClickCm = (row) => {
    multipleTableCm.value = row;
    multipleTableRefCm.value.toggleRowSelection(row);
    selectChangeCm(multipleTableCm.value);
  };

  const selectChangeCm = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTableRefCm.value!.toggleRowSelection(del_row);
    }
  };
  const goEdit = () => {
    if (!multipleTable.value.length) {
      Elessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
      router.push({
        name: 'edition_detail',
        params: {
          value: multipleTable.value[0].versionInfoId
        }
      });
    }
  };
  const goResources = () => {
    if (!multipleTableCm.value.length) {
      Elessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
      router.push({
        name: 'resources_detail',
        params: {
          fmId: multipleTableCm.value[0].changeId
        }
      });
    }
  };
</script>

<style lang="less" scoped>
  .ChangeAndUpg {
    background: #eaeef4;
    height: 100vh;
    box-sizing: border-box;
    padding: 16px 20px 20px;
    .topSearch {
      display: flex;
      width: 100%;
      margin-bottom: 10px;
      .time {
        height: 34px;
        margin-right: 50px;
        .el-date-editor {
          width: 450px;
        }
      }
      .system,
      .time {
        span {
          margin-right: 15px;
          font-size: 14px;
          color: #46545d;
        }
      }
      .btn {
        position: absolute;
        right: 20px;
        top: 16px;
        cursor: pointer;
        .el-button {
          background: #007af5;
          border-radius: 2px;
          color: #fff;
        }
      }
    }
    .title {
      display: flex;
      span {
        margin-right: 15px;
        font-size: 14px;
        color: #46545d;
      }
      .el-form {
        display: flex;
        .el-form-item {
          :deep(.el-form-item__content) {
            //width: 350px;
            margin-left: 0px !important;
            display: flex;
            .el-input {
              width: 300px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .content {
      height: calc(100% - 94px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .cmBiz,
      .vmBiz {
        height: 49%;
        box-sizing: border-box;
        background: #fff;
        p {
          height: 45px;
          padding: 15px 20px 0px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          margin: 0;
          .tip {
            font-size: 16px;
            font-weight: 400;
            color: #46545d;
            //line-height: 16px;
            //margin-bottom: 10px;
          }
          .btn {
            background: none;
            border: none;
            color: #007af5;
            cursor: pointer;
            font-size: 14px;
            .el-icon-arrow-right {
              color: #007af5;
            }
          }
        }
        .main {
          background: #fff;
          height: calc(100% - 45px);
          padding: 0 20px 10px;
          box-sizing: border-box;
          .tableBox {
            height: calc(100% - 44px);
            margin-bottom: 10px;
            box-sizing: border-box;
            :deep(.el-table-column--selection.is-leaf .el-checkbox) {
              display: none;
            }
          }
          .el-pagination {
            height: 34px;
            padding: 0;
            box-sizing: border-box;
            width: 50%;
            :deep(.el-pagination__total) {
              font-size: 14px;
              font-weight: 400;
              color: #bbbbbb;
              line-height: 34px;
            }

            :deep(.el-input__inner) {
              height: 34px;
              //width: 60px;
              background: #fff;
              //color: #66b1ff;
              color: #46545d;
            }
            :deep(button:disabled) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(.el-pager li) {
              //background: rgba(0, 0, 0, 0.1);
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
              &.active {
                // color: #fff;
                color: #46545d;
              }
            }
            :deep(.btn-prev) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(.btn-next) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(span:not([class*='suffix'])) {
              color: #bbbbbb;
            }
            :deep(.el-pagination__jump) {
              height: 34px;
              line-height: 34px;
            }
          }
        }
      }
    }
  }
</style>
